<template>
    <div>
        <div id="map_app"></div>
        <button @click="tooltip">弹出层</button>
    </div>
</template>

<script>
import pannelIcon from '../../assets/pannel.png'
export default {
    name: "tab-snapshot",
    data() {
        return {
            close: false,
            farms: [
                {
                    longitude: 111.670801,
                    latitude: 40.818311,
                    name: '内蒙古'
                },
                {
                    longitude: 119.306239,
                    latitude: 26.075302,
                    name: '福建'
                },
                {
                    longitude: 108.320004,
                    latitude: 22.82402,
                    name: '广西'
                },
            ]
        };
    },
    props: {
       
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            // 百度地图API功能
            var map = new BMap.Map("map_app", {minZoom:4, maxZoom:6});    // 创建Map实例
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);  // 初始化地图,设置中心点坐标和地图级别
            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));	  
            map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            map.setMapType(BMAP_HYBRID_MAP);
            this.farms.forEach(f => {
                var icon = new BMap.Icon(pannelIcon, new BMap.Size(32, 32), {
                    anchor: new BMap.Size(30, 30)  
                });
                var mkr =new BMap.Marker(new BMap.Point(f.longitude, f.latitude), {
                    icon: icon
                });  
                map.addOverlay(mkr);
                this.addClickHandler(f.name, mkr)  // 调用信息窗口函数
                // https://blog.csdn.net/qq_41186500/article/details/100692547  自定义图标网址
            })
        },
        addClickHandler(name, mkr) {
            mkr.addEventListener('dblclick', e => {
                this.$router.push({ path: '/home/vnc', query: { farmId: name }});
            })
        },
        tooltip() {
            console.log('Message')
            // swal('Message')
        }
    },
    computed: {
       
    }
};
</script>
<style scoped>
#map_app {
    width: 100%;
    height: 600px;
    /* background: yellow; */
}

.anchorBL {
    display: none;
} 
</style>
